<template>
	<view class="content">
		<u-sticky>
			<view style="width:750rpx;height: 150rpx;background:linear-gradient(to bottom, #273965, #353f56);margin-bottom: 10rpx;">
			<!-- 	<view style="margin-top: 24rpx;width:75%;margin-left:80rpx;">
					<template>
						<u-search v-model="ArticleFrom.articleTitle" placeholder="搜索相关最新图文" :showAction="false"
							@search="indexAll"></u-search>
					</template>
				</view> -->
				<view class="types">
					<u-tabs :list="types" @click="selectType"
					 :activeStyle="{
						color: 'white',
						fontWeight: 'bold',
						fontSize:'l0px',
						transform: 'scale(1.05)',
					 }"
					 :inactiveStyle="{
						color: 'white',
						transform: 'scale(1)',
					 }" 
					 ></u-tabs>
				</view>
			
				<view class="types_son">
					<u-tabs   :activeStyle="{
						color: 'white',
						fontWeight: 'bold',
					 }"
					 :inactiveStyle="{
						color: 'white',
						transform: 'scale(1)',
					 }"  :list="typeson" @click="selectImg" lineWidth="30"
					  ></u-tabs>
				</view>
			
			</view>
		</u-sticky>
			<u-loading-page :loading="loading"  bg-color="#e8e8e8" loading-text="loading..."></u-loading-page>
		<view class="host">
			<view class="host_body" v-for="(item,index) in hostList" :key="index">
				<view class="imageing" v-if="item.imgPath.split(',')[0]"  @click="previewImage(index)">
						<img style="width: 345rpx;" mode="widthFix" :src="baseUrl+item.imgPath.split(',')[0]"
					>
				</view>
				<!-- 推文视频  -->
			<!-- 	<view v-if="item.video">
					<video style="width: 345rpx;" mode="widthFix"
						:src="'http://152.136.35.251:8765/image/playVideoById?id='+item.video.split(',')[0]"
						@click="main(item)"></video>
				</view> -->
				<view class="host_darkness">
				<!-- 	<view class="darkness_silence">	<p class="yui">{{item.articleTitle}}</p></view> -->
				<!-- 	<view class="darkness_silence">{{item.labelId}}</view> --> 
					 <u-row class="ty" justify="space-between">
						<!-- <u-col span="2" class="yui">
							<u--image class="image1" width="40rpx" height="40rpx" :src="'http://101.43.223.224:8765/image/getImageById?id=5596'"
								shape="circle"></u--image>
						</u-col> -->
						<u-col span="12" class="yui">
							<p class="yui">{{item.name}}</p>
						</u-col>
					<!-- 	<u-col span="3">
							 <u-row  justify="start">
								 <u-col span="6"  >
									 <view class="animated like" hover-class="heartBeat">
											<image class="like"  @click="isLiked = !isLiked" :src=" isLiked ? '../../static/icon/已点赞.png' : '../../static/icon/未点赞.png'"
											></image>
										</view>
									</u-col>
								</u-row>
						</u-col> --> 
					</u-row>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"  />
	</view>
</template>
<script>
	import request from '@/util/request'
	export default {
		created() {
			//#ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			//#endif
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: this.title,
				imageUrl: this.thumb,
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: this.title,
				imageUrl: this.thumb,
			}
		},
		onLoad() {
			this.loading=true
			this.getType();
		},
		data() {
			return {
				title:'absolut Uniq研习室',
				thumb:'../../static/icon/title.jpg',
				baseUrl:'https://absolutuniq.com:8088',
				parent_id:0,
				types:[],
				typeson:[],
				typeId:0,
				loading:false,
				isLiked: false, // 是否已点赞
				status: 'loadmore',
				hostList: [
				],
				params: {// 请求参数
				        pageNum: 1,//页码
				        pageSize: 10,//每页显示
				        total: 0,//总条数
				},

			}
		},
		 // onReachBottom() {
			// 	this.loading=true
			// 	 this.params.pageNum++;
			// 	this.hostList = [...this.hostList,... [{
			// 		"images":"4283,2",
			// 		"video":"1",
			// 		"articleTitle":"yinshi",
			// 		"userName":"zhangsan",
			// 		"createTime":"2024"
			// 	},{
			// 		"images":"1,2",
			// 		"video":"1",
			// 		"articleTitle":"yinshi",
			// 		"userName":"zhangsan",
			// 		"createTime":"2024"
			// 	}]] 
			// 	 setTimeout(() => {
			// 	      // 这里放置你想要在等待5秒后执行的代码
			// 	     this.loading=false
			// 	    }, 1000);
			 
		 //                //数据触底以后，加载新的数据（就是加载新一页的数据）
		 //    },
		computed: {
		    divStyle() {
		       return {
		              color: 'green' ,
		              border: '1px solid red'
		            };
		    },
		  },
		methods: {
			showToast() {
				this.$refs.uToast.show({
					title: '加载数据',
					message: "加载数据",
					type: 'success',
				})
			},
			getType(){ //查询一级树
				request({
						url: '/imgtype/imgtype/parentIdList?id=0',
						 method: 'get'
					}).then(res => {
						this.types = res.data
						if(res.data.length>0){
							this.parent_id = res.data[0].id;
							this.getTypeSon();
						}
						 
					})
					this.loading=false
			},
			getTypeSon(){ //查询二级树
				request({
						url: '/imgtype/imgtype/parentIdList?id=' + this.parent_id,
						 method: 'get'
					}).then(res => {
						this.typeson = res.data
						if(res.data.length>0){
							this.typeId = res.data[0].id;
							this.selectImgByTypeId()
						}
					
					})
			},
			selectType(item){
				this.parent_id = item.id
				this.getTypeSon();
			},
			selectImgByTypeId(){
				request({
						url: '/imgmanage/imgmanage/selectImgByTypeId?id=' + this.typeId,
						 method: 'get'
					}).then(res => {
						this.hostList = res.data
					})
			},
			selectImg(item){
				this.typeId = item.id
				this.selectImgByTypeId();
			},
			previewImage(index) {
				const imgUrls = this.hostList[index].imgPath.split(",");
				if(imgUrls.length>0){
					const newurls = imgUrls.map(item => {
					   return  item = this.baseUrl+item;
					});
					  // 调用预览图片API
					uni.previewImage({
						current: 0, // 当前显示图片索引
						urls: newurls, // 需要预览的图片URL列表
					});
				}
			}
		}
	}
</script>

<style lang="scss">	
.like {
		color: #ffe833;
		filter: none;
		will-change: font-size;
		-webkit-animation: heart 1s
		cubic-bezier(0.17，8.89，8.32，1.49);
		animation: heart 1s
		cubic-bezier(0.17，0.89，8.32，1.49);
		width: 40rpx;
		 height: 40rpx;
}
	// .like {
 //   transition: opacity 0.5s ease;
	// 	 width: 40rpx;
	// 	 height: 40rpx;

	// }
	.noLike {
		 width: 40rpx;
		 height: 40rpx;
	
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}
	.host {
		margin-top: 40rpx;
		margin: 0 auto;
		padding: 0 20rpx;
		column-count: 2;
		column-gap: 20rpx;

	}
	.host_body {
		width: 345rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		background-color: #fff;
		break-inside: avoid;
		/*避免在元素内部插入分页符*/
		box-sizing: border-box;
		/* 	margin-top: rpx; */
		margin-bottom: 20rpx;
		box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
	}
	.imageing {
		width: 345rpx;
		height: auto;
	}

	.types {
		width: 95%;
		margin: 0 auto;
		height: 70rpx;

	}
	.types_son {
		width: 80%;
		margin: 0 auto;
		height: 70rpx;
	}

	.imageing_img {
		width: 345rpx;
		height: auto;
	}
	.host_darkness {
		padding-left: 16rpx;
		font-size: 24rpx;
		margin-top: 15rpx;
		padding-bottom: 22rpx;

	}
	.darkness_silence {
		font-weight: 800;
		margin-top: 12rpx;
		font-size: 27rpx;
		margin-left: 10rpx;
	}
	.yui {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 5px;
	}
</style>